/*
 * @Author: leemr lscmr@qq.com
 * @Date: 2023-12-15 17:04:52
 * @LastEditors: leemr lscmr@qq.com
 * @LastEditTime: 2023-12-22 13:47:12
 * @FilePath: \futures-bill\src\utils\touch.ts
 * @Description:
 *
 */
export type Pos = "up" | "down" | "left" | "right" | 'tap';


export type Binding = {
  arg: Pos
  dir: any
  value: (pos: Pos, e?: TouchEvent) => void
}



export default class Touch {
  el: HTMLElement;
  moveDom: HTMLElement;
  binding: Binding;
 // type: string
  touchPos = { x: 0, y: 0 }
  ismove = true;
  isleave = true;
  istouch = true;
  startTime = 0;
  constructor(el: HTMLElement, binding: Binding, moveDom: HTMLElement) {
    this.el = el;
    this.binding = binding;
    this.moveDom = moveDom;
   // this.type = binding.arg;
    this.init();
  }
  init() {
    this.el.addEventListener("touchstart", (e: TouchEvent) => {
      e.stopPropagation();
      //e.preventDefault();
      this.start(e);
    }, false);
    this.el.addEventListener("touchend", (e: TouchEvent) => {
     // e.preventDefault();
      e.stopPropagation();
      this.end(e);
    }, false);
    this.el.addEventListener("touchmove", (e: TouchEvent) => {
      e.stopPropagation();
      e.preventDefault();
      this.move();
      if(this.moveDom){
        this.onTouch(e);
      }
    }, false);
  }
  start(e: TouchEvent) {
    this.ismove = true;
    this.isleave = true;
    this.startTime = Date.now();
    this.touchPos = {
      x: e.changedTouches[0].pageX,
      y: e.changedTouches[0].pageY
    }
  }
  end(e: TouchEvent) {
    const disX = e.changedTouches[0].pageX - this.touchPos.x;
    const disY = e.changedTouches[0].pageY - this.touchPos.y;
    const endTime = Date.now();
    if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {
      if (Math.abs(disX) > Math.abs(disY)) {
        if (disX > 10) {
         // this.type == "swiperight"
          this.binding.value("right");
        }
        if (disX < -10) {
         // this.type == "swipeleft"
          this.binding.value("left");
        }
      } else {
        if (disY > 10) {
         // this.type == "swipedown"
          this.binding.value("down");
        }
        if (disY < -10) {
        //  this.type == "swipeup"
          this.binding.value("up");
        }
      }
    } else if (disX < 10 && disY < 10 && endTime - this.startTime < 150) {
     // this.type == "tap"
      this.binding.value("tap", e);
      this.startTime = 0;
    }
    if (this.moveDom) {
      this.moveDom.style.transform = ''
    }
  }
  onTouch(e: TouchEvent){
    const disX = e.changedTouches[0].pageX - this.touchPos.x;
    const disY = e.changedTouches[0].pageY - this.touchPos.y;
    if (Math.abs(disX) > 10 || Math.abs(disY) > 50) {
      if (Math.abs(disX) < Math.abs(disY)) {
        let y = disY;
        if (disY>0){
          y = disY > 30? 30: disY
        }else{
          y = disY <- 30 ? -30 : disY
        }
        this.moveDom.style.transform = `translateY(${y}px)`
      }
    }
  }
  move() {
    this.ismove = false
  }
}
